<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字小游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 30px;
        }

        .title {
            font-weight: bold;
            font-size: 40px;
            margin-bottom: 30px;
        }

        .desc {
            font-size: 20px;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
        }

        .descValue {
            width: 40px;
            text-align: center;
        }

        .inputBox {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .inputStyle {
            width: 200px;
            height: 40px;
            border-radius: 20px;
            padding: 0 10px;
        }

        .guessBtn,
        .reGuess {
            height: 40px;
            border-radius: 20px;
            cursor: pointer;
            transition: box-shadow 0.3s ease;
        }

        .guessBtn {
            width: 80px;
        }

        .reGuess {
            width: 60px;
        }

        .guessBtn:hover,
        .reGuess:hover {
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        }

        .numList {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div class="title">猜数字小游戏</div>
    <div class="desc">
        <div>你还有</div>
        <div class="descValue">10</div>
        <div>次机会</div>
    </div>
    <div class="numList"></div>
    <div class="inputBox">
        <input class="inputStyle" type="number" placeholder="请输入1-100之间的数字">
        <button class="guessBtn">猜数字</button>
        <button class="reGuess">重置</button>
    </div>
    <div class="tishi"></div>

    <script>
        // 元素缓存
        const el = {
            input: document.querySelector('.inputStyle'),
            guessBtn: document.querySelector('.guessBtn'),
            reGuess: document.querySelector('.reGuess'),
            tishi: document.querySelector('.tishi'),
            descValue: document.querySelector('.descValue'),
            numList: document.querySelector('.numList')
        };

        // 游戏状态管理
        let gameState = {
            target: Math.floor(Math.random() * 100) + 1,
            chances: 10,
            isOver: false,
            guessList: []
        };

        console.log('目标数字:', gameState.target);

        // 猜数字逻辑
        const handleGuess = () => {
            const inputNum = Number(el.input.value);

            // 输入验证
            if (!inputNum || inputNum < 1 || inputNum > 100) {
                el.tishi.textContent = '请输入1-100之间的有效数字';
                return;
            }

            gameState.guessList.push(inputNum)
            el.numList.textContent = gameState.guessList.join(' ')

            const isCorrect = inputNum === gameState.target;

            // 更新提示与机会
            el.tishi.textContent = isCorrect ? '🎉 恭喜你，猜对了！' :
                inputNum > gameState.target ? '📈 猜大了，再试试~' : '📉 猜小了，再试试~';

            // 处理游戏状态
            if (isCorrect) {
                el.guessBtn.disabled = true;
                gameState.isOver = true;
            } else if (--gameState.chances <= 0) {
                el.tishi.textContent = `💥 游戏结束，正确答案是 ${gameState.target}`;
                el.guessBtn.disabled = true;
                gameState.isOver = true;
            }

            // 更新UI
            el.descValue.textContent = gameState.chances;
            el.input.value = '';
        };

        // 重置游戏
        const resetGame = () => {
            gameState = {
                target: Math.floor(Math.random() * 100) + 1,
                chances: 10,
                isOver: false,
                guessList: []
            };
            el.guessBtn.disabled = false;
            el.descValue.textContent = gameState.chances;
            el.tishi.textContent = '';
            el.input.value = '';
            el.numList.textContent = ''
            console.log('新目标数字:', gameState.target);
        };

        // 事件绑定
        el.guessBtn.addEventListener('click', handleGuess);
        el.reGuess.addEventListener('click', resetGame);
        el.input.addEventListener('keydown', e => e.key === 'Enter' && handleGuess());
    </script>
</body>

</html>